<div class="botui botui-container" v-botui-container>
  <div class="botui-messages-container">
    <div v-for="msg in messages" class="botui-message" :class="msg.cssClass" v-botui-scroll>
      <transition name="slide-fade">
        <div v-if="msg.visible" :class="[{human: msg.human, 'botui-message-content': true}, msg.type]">
          <span v-if="msg.type == 'text'" v-text="msg.content" v-botui-markdown></span>
          <iframe v-if="msg.type == 'embed'" :src="msg.content" frameborder="0" allowfullscreen></iframe>
        </div>
      </transition>
      <div v-if="msg.loading" class="botui-message-content loading">
        <i class="dot"></i>
        <i class="dot"></i>
        <i class="dot"></i>
      </div>
    </div>
  </div>
  <div class="botui-actions-container">
    <transition name="slide-fade">
      <div v-if="action.show" v-botui-scroll>
        <form v-if="action.type == 'text'" class="botui-actions-text"
          @submit.prevent="handle_action_text()" :class="action.cssClass">
          <i v-if="action.text.icon"
          class="botui-icon botui-action-text-icon fa"
          :class="'fa-' + action.text.icon"></i>
          <input type="text" ref="input" :type="action.text.sub_type"
          v-model="action.text.value" class="botui-actions-text-input" :placeholder="action.text.placeholder"
          :size="action.text.size" :value="action.text.value" :class="action.text.cssClass" required v-focus/>
          <button type="submit" class="botui-actions-text-submit">Go</button>
        </form>
        <div v-if="action.type == 'button'" class="botui-actions-buttons" :class="action.cssClass">
          <button type="button" :class="button.cssClass"
            class="botui-actions-buttons-button" v-for="button in action.button.buttons"
            @click="handle_action_button(button)"
            autofocus>
            <i v-if="button.icon" class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i>
             {{button.text}}
          </button>
        </div>
      </div>
    </transition>
  </div>
</div>
